<template>
	<div class="system-menu-container" v-el-draggable-dialog>
		<el-dialog :title="option.title" v-model="isShowDialog" width="769px">
			<div class="system-menu-form">
				<el-form ref="form" :model="contentInfo" :rules="formData.rules" label-width="135px">
					<el-form-item ref="name" label="菜单名称" prop="name">
						<el-input v-model.trim="contentInfo.name" :readonly="option['type'] === 'show'" placeholder="请输入菜单名称" />
					</el-form-item>
					<el-form-item ref="icon" label="菜单图标" prop="icon">
						<el-input v-model.trim="contentInfo.icon" :readonly="option['type'] === 'show'" placeholder="请输入菜单名称" />
					</el-form-item>
					<el-form-item ref="url" label="菜单地址" prop="url">
						<el-input v-model.trim="contentInfo.url" :readonly="option['type'] === 'show'" placeholder="请输入菜单地址" />
					</el-form-item>
					<el-form-item label="菜单顺序" prop="mOrder">
						<el-input v-model.trim="contentInfo.mOrder" :readonly="option['type'] === 'show'" placeholder="请输入菜单顺序" @input="filterNum" />
					</el-form-item>
					<el-form-item ref="state" label="菜单状态" prop="state">
						<el-radio-group v-model="contentInfo.state">
							<el-radio :label="1">可用</el-radio>
							<el-radio :label="2">不可用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item ref="type" label="菜单类型" prop="type">
						<el-radio-group v-model="contentInfo.type">
							<el-radio :label="1">菜单</el-radio>
							<el-radio :label="2">权限</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button :loading="formData.loading" type="primary" @click="onSubmit">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { verifiyNumberInteger } from '/@/utils/toolsValidate'
import scrollForm from '/@/utils/scrollForm'
import { ElMessage } from 'element-plus'
import { addSysPermission, updateSysPermission } from '/@/api/menu'

export default {
	name: 'operationMenu',
	props: {
		contentInfo: {
			type: Object,
			default: () => ({})
		},
		option: {
			type: Object,
			default: () => ({ type: 'add', title: '新增' })
		}
	},
	setup(props, { emit }) {
		const refs = reactive({
			form: null,
			name: null, //菜单名称
			icon: null, //菜单图标
			url: null, //菜单地址
			state: null, //菜单状态
			type: null //菜单类型
		})

		const state = reactive({
			isShowDialog: false,
			formData: {
				loading: false,
				rules: {
					name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
					icon: [{ required: true, message: '请输入菜单图标', trigger: 'blur' }],
					url: [{ required: true, message: '请输入菜单地址', trigger: 'blur' }],
					state: [{ required: true, message: '请选择菜单状态', trigger: ['blur', 'change'] }],
					type: [{ required: true, message: '请选择菜单类型', trigger: ['blur', 'change'] }]
				}
			}
		})

		// 正整数
		const filterNum = (row, field, val: string) => {
			row[field] = verifiyNumberInteger(val)
		}

		// 打开弹窗
		const openDialog = (row: any) => {
			state.isShowDialog = true
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false
		}
		// 新增
		const onSubmit = () => {
			refs.form.validate(async (valid: boolean, object: object) => {
				if (valid) {
					state.formData.loading = true

					switch (props.option.type) {
						case 'add':
						case 'add2':
						case 'add3':
							await addSysPermission(props.contentInfo).finally(() => {
								state.formData.loading = false
							})
							ElMessage.success('新增成功')
							break
						case 'edit':
							await updateSysPermission(props.contentInfo).finally(() => {
								state.formData.loading = false
							})
							ElMessage.success('编辑成功')
							break
					}

					emit('isOk')
					closeDialog() // 关闭弹窗
				} else {
					scrollForm(refs, object, true)
				}
			})
		}

		return {
			filterNum,
			openDialog,
			closeDialog,
			onSubmit,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-menu-container {
	.system-menu-form {
		min-height: 25vh !important;
		max-height: 70vh !important;
		overflow-y: auto;
		overflow-x: hidden;
	}
}
</style>
